<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单列表</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/myOrder.css">
</head>

<body>
    <!-- 项目的最外层 -->
    <div class="outer">
        <!-- 头部 -->
        <header class="header">
            <!-- 头部的第一行 -->
            <div class="top">
                <div class="container">
                    <div class="loginList">
                        <p>尚品汇欢迎您！</p>
                        <p>
                            <span>请</span>
                            <a href="###">登录</a>
                            <a href="###" class="register">免费注册</a>
                        </p>
                    </div>
                    <div class="typeList">
                        <a href="###">我的订单</a>
                        <a href="###">我的购物车</a>
                        <a href="###">我的尚品汇</a>
                        <a href="###">尚品汇会员</a>
                        <a href="###">企业采购</a>
                        <a href="###">关注尚品汇</a>
                        <a href="###">合作招商</a>
                        <a href="###">商家后台</a>
                    </div>
                </div>
            </div>
            <!--头部第二行 搜索区域-->
            <div class="bottom">
                <h1 class="logoArea">
                    <a class="logo" title="尚品汇" href="###" target="_blank">
                        <img src="./images/logo.png" alt="">
                    </a>
                </h1>
                <div class="searchArea">
                    <form action="###" class="searchForm">
                        <input type="text" id="autocomplete" class="input-error input-xxlarge" />
                        <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                    </form>
                </div>
            </div>
        </header>
        <!--主要内容 订单列表-->
        <div class="order-main">
            <div class="container">
                <div class="order-body">
                    <!--左侧列表-->
                    <div class="order-left">
                        <dl>
                            <dt><i>·</i> 订单中心</dt>
                            <dd>我的订单</dd>
                            <dd>团购订单</dd>
                            <dd>本地生活订单 </dd>
                            <dd>我的预售</dd>
                            <dd>评价晒单</dd>
                            <dd>取消订单记录</dd>
                        </dl>
                        <dl>
                            <dt><i>·</i> 关注中心</dt>
                            <dd>关注的商品 </dd>
                            <dd>关注的店铺</dd>
                            <dd>关注的专辑 </dd>
                            <dd>关注的品牌</dd>
                            <dd>关注的活动 </dd>
                            <dd>浏览历史</dd>
                        </dl>
                        <dl>
                            <dt><i>·</i> 特色业务</dt>
                            <dd>我的营业厅 </dd>
                            <dd>京东通信 </dd>
                            <dd>定期送 </dd>
                            <dd>京东代下单</dd>
                            <dd>我的回收单 </dd>
                            <dd>节能补贴</dd>
                            <dd>医药服务 </dd>
                            <dd>流量加油站 </dd>
                            <dd>黄金托管</dd>
                        </dl>
                        <dl>
                            <dt><i>·</i> 客户服务</dt>
                            <dd>返修退换货 </dd>
                            <dd>价格保护 </dd>
                            <dd>意见建议 </dd>
                            <dd>购买咨询 </dd>
                            <dd>交易纠纷 </dd>
                            <dd>我的发票</dd>
                        </dl>
                        <dl>
                            <dt><i>·</i> 设置</dt>
                            <dd>个人信息 </dd>
                            <dd>收货地址 </dd>
                        </dl>
                    </div>
                    <!-- 右侧内容 -->
                    <div class="order-right">
                        <!--订单内容-->
                        <div class="order-content">
                            <div class="title">
                                <h3>我的订单</h3>
                            </div>
                            <div class="chosetype">
                                <table>
                                    <thead>
                                        <tr>
                                            <th width="29%">商品</th>
                                            <th width="31%">订单详情</th>
                                            <th width="13%">收货人</th>
                                            <th>金额</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div class="orders">

                                <table class="order-item">
                                    <thead>
                                        <tr>
                                            <th colspan="5">
                                                <span class="ordertitle">2017-02-11 11:59　订单编号：7867473872181848 <span
                                                        class="pull-right delete"><img
                                                            src="./images/delete.png"></span></span>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td width="60%">
                                                <div class="typographic">
                                                    <img src="./images/goods.png">
                                                    <a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a>
                                                    <span>x1</span>
                                                    <a href="#" class="service">售后申请</a>
                                                </div>
                                            </td>
                                            <td rowspan="2" width="8%" class="center">小丽</td>
                                            <td rowspan="2" width="13%" class="center">
                                                <ul class="unstyled">
                                                    <li>总金额¥138.00</li>
                                                    <li>在线支付</li>

                                                </ul>
                                            </td>
                                            <td rowspan="2" width="8%" class="center">
                                                <a href="#" class="btn">已完成 </a>
                                            </td>
                                            <td rowspan="2" width="13%" class="center">
                                                <ul class="unstyled">
                                                    <li>
                                                        <a href="mycomment.html" target="_blank">评价|晒单</a>
                                                    </li>

                                                </ul>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="50%">
                                                <div class="typographic">
                                                    <img src="./images/goods.png">
                                                    <a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a>
                                                    <span>x1</span>
                                                    <a href="#" class="service">售后申请</a>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <table class="order-item">
                                    <thead>
                                        <tr>
                                            <th colspan="5">
                                                <span class="ordertitle">2017-02-11 11:59　订单编号：7867473872181848 <span
                                                        class="pull-right delete"><img
                                                            src="./images/delete.png"></span></span>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td width="60%">
                                                <div class="typographic">
                                                    <img src="./images/goods.png">
                                                    <a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a>
                                                    <span>x1</span>
                                                    <a href="#" class="service">售后申请</a>
                                                </div>
                                            </td>
                                            <td rowspan="2" width="8%" class="center">小丽</td>
                                            <td rowspan="2" width="13%" class="center">
                                                <ul class="unstyled">
                                                    <li>总金额¥138.00</li>
                                                    <li>在线支付</li>

                                                </ul>
                                            </td>
                                            <td rowspan="2" width="8%" class="center">
                                                <a href="#" class="btn">已完成 </a>
                                            </td>
                                            <td rowspan="2" width="13%" class="center">
                                                <ul class="unstyled">
                                                    <li>
                                                        <a href="mycomment.html" target="_blank">评价|晒单</a>
                                                    </li>

                                                </ul>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="50%">
                                                <div class="typographic">
                                                    <img src="./images/goods.png">
                                                    <a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a>
                                                    <span>x1</span>
                                                    <a href="#" class="service">售后申请</a>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="choose-order">
                                <div class="pagination">
                                    <ul>
                                        <li class="prev disabled">
                                            <a href="javascript:">«上一页</a>
                                        </li>
                                        <li class="page actived">
                                            <a href="javascript:">1</a>
                                        </li>
                                        <li class="page">
                                            <a href="javascript:">2</a>
                                        </li>
                                        <li class="page">
                                            <a href="javascript:">3</a>
                                        </li>
                                        <li class="page">
                                            <a href="javascript:">4</a>
                                        </li>

                                        <li class="next disabled">
                                            <a href="javascript:">下一页»</a>
                                        </li>
                                    </ul>
                                    <div>
                                        <span>&nbsp;&nbsp;&nbsp;&nbsp;共2页&nbsp;</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--猜你喜欢-->
                        <div class="like">
                            <h4 class="kt">猜你喜欢</h4>
                            <ul class="like-list">
                                <li class="likeItem">
                                    <div class="p-img">
                                        <img src="./images/itemlike01.png" />
                                    </div>
                                    <div class="attr">
                                        <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                    </div>
                                    <div class="price">
                                        <em>¥</em>
                                        <i>3699.00</i>
                                    </div>
                                    <div class="commit">已有6人评价
                                    </div>
                                </li>
                                <li class="likeItem">
                                    <div class="p-img">
                                        <img src="./images/itemlike02.png" />
                                    </div>
                                    <div class="attr">
                                        Apple苹果iPhone 6s/6s Plus 16G 64G 128G
                                    </div>
                                    <div class="price">
                                        <em>¥</em>
                                        <i>4388.00</i>
                                    </div>
                                    <div class="commit">已有700人评价
                                    </div>
                                </li>
                                <li class="likeItem">
                                    <div class="p-img">
                                        <img src="./images/itemlike03.png" />
                                    </div>
                                    <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本
                                    </div>
                                    <div class="price">
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </div>
                                    <div class="commit">已有700人评价
                                    </div>
                                </li>
                                <li class="likeItem">
                                    <div class="p-img">
                                        <img src="./images/itemlike04.png" />
                                    </div>
                                    <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本
                                    </div>
                                    <div class="price">
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </div>
                                    <div class="commit">已有700人评价
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <div class="footer-container">
                <div class="footerList">
                    <div class="footerItem">
                        <h4>购物指南</h4>
                        <ul class="footerItemCon">
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>购物指南</li>
                        </ul>

                    </div>
                    <div class="footerItem">
                        <h4>配送方式</h4>
                        <ul class="footerItemCon">
                            <li>上门自提</li>
                            <li>211限时达</li>
                            <li>配送服务查询</li>
                            <li>配送费收取标准</li>
                            <li>海外配送</li>
                        </ul>
                    </div>
                    <div class="footerItem">
                        <h4>支付方式</h4>
                        <ul class="footerItemCon">
                            <li>货到付款</li>
                            <li>在线支付</li>
                            <li>分期付款</li>
                            <li>邮局汇款</li>
                            <li>公司转账</li>
                        </ul>
                    </div>
                    <div class="footerItem">
                        <h4>售后服务</h4>
                        <ul class="footerItemCon">
                            <li>售后政策</li>
                            <li>价格保护</li>
                            <li>退款说明</li>
                            <li>返修/退换货</li>
                            <li>取消订单</li>
                        </ul>
                    </div>
                    <div class="footerItem">
                        <h4>特色服务</h4>
                        <ul class="footerItemCon">
                            <li>夺宝岛</li>
                            <li>DIY装机</li>
                            <li>延保服务</li>
                            <li>尚品汇E卡</li>
                            <li>尚品汇通信</li>
                        </ul>
                    </div>
                    <div class="footerItem">
                        <h4>帮助中心</h4>
                        <img src="./images/wx_cz.jpg">
                    </div>
                </div>
                <div class="copyright">
                    <ul class="helpLink">
                        <li>关于我们
                            <span class="space"></span>
                        </li>
                        <li>联系我们
                            <span class="space"></span>
                        </li>
                        <li>关于我们
                            <span class="space"></span>
                        </li>
                        <li>商家入驻
                            <span class="space"></span>
                        </li>
                        <li>营销中心
                            <span class="space"></span>
                        </li>
                        <li>友情链接
                            <span class="space"></span>
                        </li>
                        <li>关于我们
                            <span class="space"></span>
                        </li>
                        <li>营销中心
                            <span class="space"></span>
                        </li>
                        <li>友情链接
                            <span class="space"></span>
                        </li>
                        <li>关于我们</li>
                    </ul>
                    <p>地址：北京市昌平区宏福科技园综合楼6层</p>
                    <p>京ICP备19006430号</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>